<template>
<div>
    <el-dialog title="新增工单" :visible="visible" width="630px" @close="closeForm" >
    <!-- 默認插槽 -->
    <el-form ref="form" :model="newOrderData" label-width="100%" >
  <el-form-item label-width="140px" prop=".innerCode" :rules="[{ required: true, message: '请先输入设备编号',trigger:'blur'}]" label="设备编号"><el-input  v-model="newOrderData.innerCode" maxlength="15" show-word-limit style="width:396px" placeholder="请输入" @change="changeInnerCode" ></el-input></el-form-item>
  <el-form-item label-width="140px" prop="productType" :rules="[{ required: true, message: '必填',trigger:['blur']}]" label="工单类型" >
    <el-select v-model.number="newOrderData.productType" placeholder="请选择" style="width:396px">
      <el-option label="补货工单" value="2"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item v-if="!type"  label-width="140px" label="补货数量"><el-button :disabled="!newOrderData.innerCode" type="text" @click="goodslist=true" style="color:#5f84ff;border:none"><span class="iconfont icon-xinxidengji"></span> 补货清单</el-button></el-form-item>
  <el-form-item  label-width="140px"  prop="assignorId" label="运营人员"  :rules="[{ required: true, message: '必填',trigger:['blur']}]">
    <el-select v-model.number="newOrderData.assignorId" placeholder="请选择" style="width:396px">
      <el-option v-for="item in getOperatorList" :key="item.userId" :label="item.userName" :value="item.userId" />
    </el-select>
  </el-form-item>
  <el-form-item label-width="140px"  prop="desc" :rules="[{ required: true, message: '必填',trigger:['blur']}]" label="备注"><el-input  style="width:396px" type="textarea" v-model="newOrderData.desc"></el-input></el-form-item>
</el-form>
    <!-- 默認 -->
    <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
      <el-button @click="closeForm" class="cancel">取 消</el-button>
      <el-button type="primary" class="comfirm" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
<!-- 需求列表 弹框 -->
                <el-dialog :append-to-body="true" title="补货详情" :visible="goodslist" width="630px" @close="reload" >
                  <!-- 默認插槽 需求表单 -->
                    <el-table :data="details" max-height="440px"    style="width: 100%;">
                        <el-table-column prop="channelCode" label="货道编号"      min-width="92px" > </el-table-column>
                        <el-table-column empty-text='-' :prop="goodslisttype?'sku.skuName':'skuName'"  label="商品名称"      min-width="92px" > </el-table-column>
                        <el-table-column v-if="goodslisttype===1" :formatter="abc" empty-text  prop="currentCapacity" label="当前数量"  min-width="92px" > </el-table-column>
                        <el-table-column v-if="goodslisttype===1" empty-text prop="maxCapacity" label="还可添加"      min-width="92px" > </el-table-column>
                        <el-table-column prop="expectCapacity" label="补满数量"       min-width="92px" >
                          <template v-slot="{row}" v-if="goodslisttype===1">
                            <!-- <div>{{row}},{{column}},{{$index}}</div> -->
                            <el-input-number v-if="row.expectCapacity" v-model="row.expectCapacity" controls-position="right" :min="1" :max="10"></el-input-number>
                            <span v-else>暂无数据</span>
                          </template>
                        </el-table-column>
                    </el-table>
                  <!-- footer-butotn -->
                  <span slot="footer" v-if="goodslisttype===1" class="dialog-footer" style="display: flex; justify-content: center">
                    <el-button @click="goodslist=false" class="cancel">取 消</el-button>
                    <el-button type="primary" class="comfirm" @click="addlist">确 定</el-button>
                  </span>
                </el-dialog>
<!-- 需求列表 弹框 -->
</div>
</template>

<script>
import { getOperatorList, getChannelList, create, getList } from '@/api/orders'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    taskinfo: {
      type: Object,
      reuired: true
    },
    type: {
      type: Boolean,
      required: true
    }

  },
  created () {
    if (this.taskinfo && this.goodslisttype === 1) {
      this.newOrderData = this.taskinfo
      this.changeInnerCode(this.newOrderData.innerCode)
    }
  },
  // watch: {
  //   getOperatorList: {
  //     immediate: true,
  //     handler () {
  //       this.btn = false
  //     }
  //   }
  // },
  data () {
    return {
      newOrderData: { // create 新建工单的 data对象
        createType: 1, // 创建类型，传1
        innerCode: '', // 设备编号
        userId: 1, // 执行人Id..当前登录账号对应的userId
        productType: '', // 工单类型
        desc: '', // 备注
        assignorId: '',
        details: []
      },
      details: [// 渲染的商品列表
        // channelCode:'',
        // expectCapacity:'',
        // skuId:'',
        // skuName:'',
        // skuImage:''
      ],
      getOperatorList: [], // 获取运营人员的列表
      goodslist: false, // 需求列表的  绑定的弹出值
      goodslisttype: 1 // 详情页进入list时的type
    }
  },
  methods: {
    closeForm () { // 关闭表单
      this.$emit('update:visible', false)
    },
    async changeInnerCode (val) {
      const { data: OperatorList } = await getOperatorList(val)
      this.getOperatorList = OperatorList// 获取运营人员列表
      const { data: channelList } = await getChannelList(val)
      this.details = channelList// 获取商品列表
      // this.details.forEach((item)=>itemexpectCapacity)
      this.details.forEach((item, index) => { this.$set(item, 'expectCapacity', 10) })// 新增的属性要用''包裹
      console.log(this.details)
    },
    abc (cellValue) { // tablecolumn 数据处理
      // console.log(cellValue)// 打印数组的当前遍历项
      if (!cellValue.sku) {
        cellValue.sku = { skuName: '-' }
        cellValue.maxCapacity = '-'
        cellValue.expectCapacity = ''
        cellValue.currentCapacity = '-'
      } else {
        return cellValue.currentCapacity
      }
    },
    addlist () { // 将表单进行 筛选 ,添加到 data中
      this.newOrderData.details = this.details.map(item => {
        if (item.sku.skuName !== '-') {
          return {
            channelCode: item.channelCode,
            expectCapacity: item.expectCapacity,
            skuId: item.sku.skuId,
            skuImage: item.sku.skuImage,
            skuName: item.sku.skuName
          }
        } else {
          return null
        }
      }).filter(item => item)
      console.log(this.newOrderData.details)
      this.goodslist = false
    },
    async submit () {
      try {
        delete this.newOrderData.details
        const res = await create({ ...this.newOrderData })
        console.log(res)
      } catch (err) {
        console.log(err)
        this.$message(err.response.data)
      } finally {
        this.$refs.form.resetFields()
        this.$emit('update:visible', false)
      }
    },
    async changegoodlist () {
      const { data } = await getList(this.taskinfo.taskId)
      console.log(data)
      this.details = data
    },
    reload () {
      if (this.goodslisttype === 0) {
        this.goodslist = false
        this.changeInnerCode(this.newOrderData.innerCode)
        this.goodslisttype = 1
      }
      this.goodslist = false
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-footer {//form-footer 確認框
  .comfirm {
    background: linear-gradient(135deg, #ff7d43, #db3602) !important;
    border: none;
  }
  .comfirm:hover {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  }
  .cancel {
    background-color: #fbf4f0 !important;
    border: none;
    color: #655b56 !important;
  }
  .cancel:hover {
    background: #f3e7e1 !important;
  }
}
.dialog-body {
  .el-form-item{
    width: 100%;
    height: 36.5px;
  }

}
</style>
>
